import React, { useRef, useState, useEffect } from 'react';
import { connect } from 'umi';
import TableDataBlock from '@/components/TableDataBlock';
import { reloadTab } from '@/utils/utils';
import { notification } from 'antd';
import { DragHandle } from '@/components/TableDataBlock/SortBlock';
import { Button, Modal, Space, Tree } from 'antd';


const TreeModel = (props) => {
    const {
        visible = false,
        onClose,
        loading,
        handleCallback,
        dispatch,
        treeList
    } = props;
    const { show = false, type, detail = [], disabledList } = visible;

    const [list, setList] = useState([])
    const [renderTree, setRenderTree] = useState([])
    const filterIncludes = (id) => {
        return disabledList.reduce((item, val) => {
            if (item) {
                return item
            } else {
                if (val === id) {
                    return true
                } else {
                    return item
                }
            }
        }, false)
    }
    const setFilterList = (list) => {
        return list.reduce((val, item) => {
            const { children = [], value } = item
            if (filterIncludes(value)) {
                return val
            } else {
                if (children.length > 0) {
                    return [...val, {
                        ...item,
                        children: setFilterList(children)
                    }]
                } else {
                    return [...val, item]
                }
            }
        }, [])
    }
    useEffect(() => {
        if (!show) {
            setList([])
            setRenderTree([])
        } else {
            if (type === 'edit') {
                setList(detail)
            }
            setRenderTree(setFilterList(treeList))
        }
    }, [show])
    const modalProps = {
        title: '选择配送区域',
        width: 1200,
        visible: show,
        bodyStyle: { height: 600, overflowY: 'auto' },
        maskClosable: true,
        destroyOnClose: true,
        zIndex: 1010,
        confirmLoading: loading,
        footer: <Space>
            <Button onClick={() => onClose()}>取消</Button>
            <Button loading={loading} type='primary' onClick={() => handleCallback(list)}>确定</Button>
        </Space>
    };
    const onCheck = (checkedKeys, e) => {
        setList(checkedKeys)
    }
    console.log(treeList)
    return (
        <Modal {...modalProps} onCancel={onClose}>
            <Tree
                checkable
                onCheck={onCheck}
                checkedKeys={list}
                defaultExpandedKeys={treeList.map(val => {
                    return val.value
                })}
                fieldNames={{
                    title: "label",
                    key: 'value',
                    children: 'children'
                }}
                treeData={renderTree}
            ></Tree>
        </Modal>
    );
};

export default connect(({ loading }) => ({
    loading: loading.effects['user/fakeAdminPageFieldConfig'],
}))(TreeModel);
